<template>
  <div class="flex justify-center items-start scroll-y" v-if="isConnected">
    <q-card class="q-pa-md q-ma-md" :class="ui.cardClass">
      <q-card-section class="text-h3 text-grey-7 text-bold text-center">{{
          status.model
        }}
      </q-card-section>
      <q-separator class="q-ma-md"/>
      <q-list style="min-width: 25rem" class="text-h4">
        <q-item v-if="status.network !== null" dense clickable v-ripple>
          <q-item-section side>{{ $t("amrControl.设备") }}ID</q-item-section>
          <q-item-section class="text-right">{{
              status.device
            }}
          </q-item-section>
        </q-item>
        <map-pose-info
          :label="$t('amrControl.当前点位')"
          :pose-id="status.mapPoseID"
          update
        />
        <q-item v-if="status.network !== null" dense clickable v-ripple>
          <q-item-section side>{{ $t("amrControl.设备") }}IP</q-item-section>
          <q-item-section class="text-right">{{
              status.network.IPv4
            }}
          </q-item-section>
        </q-item>
        <q-separator class="q-ma-md"/>
        <q-item
          class="text-h5"
          v-if="status.network !== null"
          dense
          clickable
          v-ripple
        >
          <q-item-section side>{{ $t("amrControl.设备类型") }}</q-item-section>
          <q-item-section class="text-right">{{ status.type }}</q-item-section>
        </q-item>
        <q-item class="text-h5" dense clickable v-ripple>
          <q-item-section side>{{ $t("amrControl.底盘状态") }}</q-item-section>
          <q-item-section
            class="text-right"
            :class="stm32Color[status.state]"
          >{{ stm32State[status.state] || status.state }}
          </q-item-section
          >
        </q-item>
        <q-item
          class="text-h5"
          dense
          v-for="item in numberParam"
          v-bind:key="item.key"
          clickable
          v-ripple
        >
          <q-item-section side>{{ item.label }}</q-item-section>
          <q-item-section class="text-right"
          >{{
              (status[item.value] || 0).toFixed(2)
            }}{{ item.unit }}
          </q-item-section
          >
        </q-item>
        <q-item class="text-h5" dense clickable v-ripple>
          <q-item-section side>{{ $t("amrControl.设备状态") }}</q-item-section>
          <q-item-section
            :class="statusColor[status.status]"
            class="text-right"
          >{{ statusName[status.status] || status.status }}
          </q-item-section
          >
        </q-item>
        <q-item class="text-h5" dense clickable v-ripple>
          <q-item-section side>{{ $t("amrControl.阻挡时间") }}</q-item-section>
          <q-item-section class="text-right">{{
              status.blockedTime
            }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <q-card class="q-ma-md q-pa-md" :class="ui.cardClass">
      <q-card-section class="text-h3 text-grey-7 text-bold text-center">
        {{ $t("amrControl.库位列表") }}
      </q-card-section>
      <q-separator class="q-ma-md"/>
      <q-list class="text-h5" style="min-width: 25rem">
        <template
          v-if="
            'cargoList' in status.data
              ? status.data.cargoList.length !== 0
              : false
          "
        >
          <q-item
            class="text-h5"
            dense
            v-for="item in status.data.cargoList"
            v-bind:key="item.id"
            clickable
            v-ripple
            @click="modifiedDialog.show(item)"
          >
            <q-item-section
            >{{ $t("amrControl.类型") }} {{ item.type }}
            </q-item-section
            >
            <q-item-section side
            >{{ $t("amrControl.已用") }}{{ item.used }}/{{
                item.capacity
              }}
            </q-item-section
            >
          </q-item>
          <q-item class="text-h5" dense>
            <q-item-section class="text-center text-grey-6">
              <div class="q-gutter-x-lg q-mt-sm">
                <q-btn label="一键清空" color="red" @click="empty"/>
                <q-btn label="一键复位" color="secondary" @click="reset"/>
              </div>
            </q-item-section>
          </q-item>
        </template>
        <q-item class="text-h5" dense v-else>
          <q-item-section class="text-center text-grey-6">{{
              $t("amrControl.暂无库位")
            }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <modified-state ref="modifiedDialog"/>
  </div>
  <div class="full-height" v-else :class="ui.cardClass">
    <div class="flex-center absolute-center text-h4">
      {{ $t("amrControl.未连接机器人") }}
    </div>
  </div>
</template>
<script setup>
import {status, isConnected} from "src/utils/deviceWs";
import {useQuasar} from "quasar";
import {api} from "boot/axios";
import {useAPIStore} from "stores/api";
import ModifiedState from "components/amr/ModifiedState.vue";
import {ref} from "vue";
import MapPoseInfo from "components/amr/MapPoseInfo.vue";
import {useUiStore} from "stores/ui";
import {useI18n} from "vue-i18n";

const t = useI18n().t;
const numberParam = [
  {label: t("amrControl.电池电量"), value: "batteryNumber", unit: "%"},
  {label: t("amrControl.电池电压"), value: "batteryVolt", unit: "V"},
  {label: t("amrControl.线速度"), value: "linearSpeed", unit: "m/s"},
  {label: t("amrControl.角速度"), value: "angularSpeed", unit: "m/rad"},
  {label: `X${t("amrControl.坐标")}`, value: "x"},
  {label: `Y${t("amrControl.坐标")}`, value: "y"},
];
const statusName = {
  idle: t("amrControl.空闲"),
  running: t("amrControl.运动中"),
  pause: t("amrControl.暂停"),
  error: t("amrControl.错误需复位"),
};
const statusColor = {
  idle: "text-secondary",
  running: "text-primary",
  pause: "text-bold text-warning",
  error: "text-bold text-negative",
};
const stm32Color = {
  PAUSE: "text-bold text-warning",
  NORMAL: "text-secondary",
  QUICKSTOP: "text-bold text-negative",
};
const stm32State = {
  PAUSE: t("amrControl.暂停"),
  NORMAL: t("amrControl.正常"),
  QUICKSTOP: t("amrControl.急停"),
};

const ui = useUiStore();
const $q = useQuasar();
const modifiedDialog = ref(null);

// eslint-disable-next-line no-unused-vars
function setHeight() {
  $q.dialog({
    title: t("amrControl.调整末端升降机构"),
    message: t("amrControl.将升降机构调节至目标高度"),
    prompt: {
      model: 0,
      type: "number",
    },
    dark: ui.isDark,
    cancel: t("cancel"),
    ok: t("ok"),
    persistent: true,
  }).onOk((data) => {
    api
      .post(useAPIStore().amrUrl + "ros/call", [Number(data)], {
        params: {service: "stack_operate"},
      })
      .then((rs) => {
        switch (typeof rs.data.values) {
          case "string":
            $q.notify({
              message: rs.data.values,
              type: "negative",
              position: "bottom",
            });
            break;
          case "object":
            if (rs.data.values.success)
              $q.notify({
                message: t("amrControl.指令下发成功"),
                type: "positive",
                position: "bottom",
              });
            else
              $q.notify({
                message: rs.data.values.message,
                type: "warning",
                position: "bottom",
              });
        }
      });
  });
}

// 一键清空所有库
function empty() {
  $q.dialog({
    title: "清空",
    message: "一键清空所有库",
    cancel: t("cancel"),
    ok: t("ok"),
  }).onOk(() => {
    api
      .post(useAPIStore().amrUrl + "ros/call", ["Clear All"], {
        params: {service: "modify_local_storage"},
      })
      .then((rs) => {
        switch (typeof rs.data.values) {
          case "string":
            $q.notify({
              message: rs.data.values,
              type: "negative",
              position: "bottom",
            });
            break;
          case "object":
            if (rs.data.values.result)
              $q.notify({
                message: t("amrControl.指令下发成功"),
                type: "positive",
                position: "bottom",
              });
            else
              $q.notify({
                message: rs.data.values.result,
                type: "warning",
                position: "bottom",
              });
        }
      });
  });
}

// 一键复位所有库
function reset() {
  $q.dialog({
    title: "复位",
    message: "请输入需要一键复位的库位属性",
    prompt: {
      model: "",
      type: "text",
    },
    dark: ui.isDark,
    cancel: t("cancel"),
    ok: t("ok"),
    persistent: true,
  }).onOk((data) => {
    api
      .post(useAPIStore().amrUrl + "ros/call", ["Put All:" + data], {
        params: {service: "modify_local_storage"},
      })
      .then((rs) => {
        switch (typeof rs.data.values) {
          case "string":
            $q.notify({
              message: rs.data.values,
              type: "negative",
              position: "bottom",
            });
            break;
          case "object":
            if (rs.data.values.result)
              $q.notify({
                message: t("amrControl.指令下发成功"),
                type: "positive",
                position: "bottom",
              });
            else
              $q.notify({
                message: rs.data.values.result,
                type: "warning",
                position: "bottom",
              });
        }
      });
  });
}
</script>
